<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>051-月历.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.clearfix:after{
			display: block;
			clear: both;
			content: '';	
			visibility: hidden;
			height: 0;		
		}
		.clearfix{
			*zoom:1;
		}
		.time{
			width: 380px;
			height: 600px;
			margin: 50px auto;
			background-color: #ccc;
			border: 1px solid #000;
		}
		li{
			float: left;
			width: 100px;
			height: 100px;
			margin-top: 20px;
			margin-left: 20px;
			line-height: 100px;
			font-size: 30px;
			color: #fff;
			background-color:  #000;
			text-align: center;
			list-style: none;
			cursor: pointer;

		}
		.active{
			color: #000;
			background-color: #fff;
		}

		.plan{
			width: 100%;
			height: 100px;
			padding: 20px;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div class="time">
		<ul class="clearfix">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
		</ul>
		<div class="plan">
			<!-- <h2>1月</h2>
			<p>吃饭</p> -->
		</div>
	</div>
</body>
<script>
	var aLi = document.getElementsByTagName('li');
	var oPlan = document.querySelector('.plan');
	var aPlan = ["吃饭","睡觉","吃饭","睡觉","听音乐","看电影","吃饭","睡觉","吃饭","睡觉","听音乐","看电影",];

	oPlan.innerHTML = "<h2>1月</h2><p>" + aPlan[0] + "</p>";

	for(var i =0;i<aLi.length;i++){
		aLi[i].index = i;
		aLi[i].onmouseover = function(){
			for(var j=0;j<aLi.length;j++){
				aLi[j].className = '';
			}
			this.className = 'active';
			oPlan.innerHTML = "<h2>" + (this.index+1) + "月</h2><p>" + aPlan[this.index]+ "</p>";
		}
	}
</script>
</html>